<template>
    <div class="aggregation-found-figures">
        <div class="figures--title">活跃人物</div>
        <div class="figures--content">
            <div v-for="(item, index) in figuresArr" :key="index" class="figures--content--item">
                <div class="item--index">
                    <span :class="`item${index}`">{{ index + 1 }}</span>
                </div>
                <div class="item--name">{{ item.name }}</div>
                <div class="item--item--data-size">{{ item.dataSize }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AggregationFoundFigures",
        data() {
            return {
                figuresArr: []
            }
        },
        beforeMount() {
            setTimeout( () => {
                this.figuresArr = [
                    {name: "艾德里安·阿尔瓦", dataSize: "1,287,551"},
                    {name: "艾德里安·阿尔瓦", dataSize: "1,287,551"},
                    {name: "艾德里安·阿尔瓦", dataSize: "1,287,551"},
                    {name: "艾德里安·阿尔瓦", dataSize: "1,287,551"},
                    {name: "艾德里安·阿尔瓦", dataSize: "1,287,551"}
                ]
            }, 1000)
        }
    }
</script>

<style lang="scss" scoped>
    .aggregation-found-figures {
        .figures--title {

        }
        .figures--content {
            .figures--content--item {
                display: flex;
                line-height: 40px;
                border-bottom: 1px solid #99f;
                .item--index {
                    width: 10%;
                    text-align: center;
                    span {
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        border-radius: 4px;
                        line-height: 1.5rem;
                    }
                    span.item0 {
                        background: #f99;
                    }
                    span.item1 {
                        background: #99f;
                    }
                    span.item2 {
                        background: #9f9;
                    }
                }
                .item--name {
                    width: 50%;

                }
                .item--item--data-size {
                    width: 40%;
                    text-align: right;
                }
            }
            .figures--content--item:last-child {
                border-bottom: 0;
            }
        }
    }
</style>
